<template>
	<transition
		enter-active-class='animated fadeIn'
		leave-active-class='animated fadeOut'
	>
		<div id='goods-info-evaluate'>
			<div class='avatar'>
				<div style='width:20%'>
					<img 
						:src="evaluateInfo.headUrl" 
						height="45px" 
						width="45px" 
						alt="avatar"
						style='border-radius:50%;'
					>
				</div>
				<div style='width:80%;font-size:16px;box-sizing:border-box;padding-top:13px;'>
					<div style='float:left'>{{evaluateInfo.evaluateUserName}} &nbsp;</div>
					<div style='float:left'>
						<el-rate
						  v-model="rate"
						  disabled
						  text-color="#ff9900"
						>
						</el-rate>
					</div>
				</div>
			</div>
			<p style='padding-top:8px;color:#999;font-size:13px;'>
				{{handleTime(evaluateInfo.addtime)}}&nbsp;&nbsp;
				<template v-if='evaluateInfo.goodsSpec'>
					<span v-for="(zhi,index) in JSON.parse(evaluateInfo.goodsSpec)">
						<span v-for="(guige,key) in zhi" :key='key'>
							{{guige}}
						</span>
					</span>
				</template>
			</p>
			<div class='evaluate-content'>
				{{evaluateInfo.evaluateInfo}}
			</div>
			<el-row v-if='evaluateInfo.evaluateImgJson'>
				<el-col :span='6' style='margin-bottom:5px;' v-for="(val,index) in JSON.parse(evaluateInfo.evaluateImgJson).imageUrl" :key='index'>
					<img :src="val" width="90%" height='60' alt="evaluate">
				</el-col>
			</el-row>
		</div>
	</transition>
	
</template>

<script>
	import {_date} from '@/comm.js';
	export default {
		props:['evaluateInfo'],
		data(){
			return ({
				rate:Math.random()>0.5?4:5
			});
		},
		methods:{
			handleTime(val){
				return _date(val);
			}
		}
	}
</script>

<style scoped>
	.animated{
		animation-duration: .5s;
		animation-fill-mode:both;
	}
	#goods-info-evaluate{
		padding:20px 0 20px 12px;
		border-top:1px solid #eee;
		background: white;
	}
	.avatar{
		height:45px;
	}
	.avatar > div{
		float:left;
		height: 100%;
	}
	.evaluate-content{
		padding: 18px 0;
		line-height: 20px;
		letter-spacing: 1px;
	}
</style>